<template>
  <van-form ref="refForm">
    <LoginLayout>
      <template #logo>
        <div style="margin-bottom: 20px">
          icp-mobile
        </div>
      </template>

      <template #username>
        <van-field v-model="userModel.username"
                   round style="border-radius: 100px" placeholder="请输入用户名"/>
      </template>

      <template #password>
        <van-field v-model="userModel.password"
                   round type="password" style="border-radius: 100px" placeholder="请输入密码"/>
      </template>
      <!--    <template #chekcode>-->
      <!--      <van-field round type="password" style="border-radius: 100px" placeholder="请输入校验码"/>-->
      <!--    </template>-->
      <template #buttons>
        <van-button :loading="loading" @click="login" type="primary" round style="width: 100%; margin-top: 10px">登录
        </van-button>
      </template>

      <template #infos>
        北京浩宏达科技发展股份公司
      </template>
    </LoginLayout>
  </van-form>
</template>
<script lang="ts" setup>
import LoginLayout from "@/components/hhd/Login/LoginLayout.vue";
import {ref, shallowRef} from "vue";
import {loginAction} from "@req";
import {useRouter} from "vue-router";
import {isEmpty} from "@/utils";
import {$notify} from "@plat";

type UserData = {
  username: string | undefined,
  password: string | undefined
}

const router = useRouter();
const userModel = ref<UserData>({password: undefined, username: undefined});
const loading = ref(false);
const refForm = shallowRef();

defineOptions({
  name: 'Login'
})

function login() {
  if (isEmpty(userModel.value.username) || isEmpty(userModel.value.password)) {
    $notify({
      type: "toast",
      title: "请输入用户名和密码",
    })
    return;
  }
  doLogin();
}

function doLogin() {
  // @ts-ignore
  loginAction(JSON.parse(JSON.stringify(userModel.value))).then(res => {
    router.replace({name: 'home'})
  }).catch((err: any) => {
    console.log(err)
  });
}
</script>